﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link href="layer/css/layui.css" rel="stylesheet" />
    <script src="layer/layui.js"></script>
    <script src="Scripts/jquery-1.10.2.min.js"></script>

    <script src="Scripts/jquery.nicescroll.min.js"></script>
    <script>
        function closeWin() {
            var index = window.parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            window.parent.layer.close(index)
        }

        $(document).ready(function () {

            var nice = $("html").niceScroll();  // The document page (body)
            $(".layui-tab-item").niceScroll({ cursorborder: "", cursorcolor: "#eeeeee", boxzoom: true }); // First scrollable DIV
        });

    </script>

    <style>
        .MainTopInfo {
            height: 70px;
            display: flex;
            background-color: #eeeeee;
        }

            .MainTopInfo img {
                padding: 10px;
                width: 50px;
                height: 50px;
            }

            .MainTopInfo .nameDiv {
                height: 70px;
                padding: 5px;
                padding-top: 10px;
                font-size: 16px;
            }

            .MainTopInfo .nameLabel {
            }

            .MainTopInfo .descriptionLabel {
                color: #808080;
                font-size: 12px;
            }

            .MainTopInfo .closeBtn {
                right: 5px;
                position: absolute;
                font-size: 18px;
            }

        .tabDiv {
            width: 100%;
            margin-top: -2px;
            margin-bottom: -2px;
        }

        .ItemDiv {
            height: 50px;
            display: flex;
        }

            .ItemDiv:hover {
                background-color:#eeeeee
            }

            .ItemDiv img {
                padding: 0px 10px 5px 5px;
                width: 30px;
                height: 30px;
            }

            .ItemDiv .nameDiv {
                height: 50px;
                padding: 0px 10px 5px 5px;
            }

            .ItemDiv .nameLabel {
            }

            .ItemDiv .descriptionLabel {
                color: #808080;
                font-size: 12px;
            }
        .itemBigDiv {
            overflow-y:scroll;height:390px
        
        }
        .SetDiv {
            background-color:#eeeeee;
 
            height:50px;

        }
            .SetDiv a {
                font-size:20px;
                padding-left:20px;                
            }
    </style>
</head>
<body>
    <div class="MainTopInfo">
        <img src="x1.jpg" />
        <div class="nameDiv"><label>未闻花名</label><br /><label class="descriptionLabel">要成为海贼王的男人</label></div>
        <a href="javascript:closeWin();" class="layui-icon layui-icon-close closeBtn"> </a>
    </div>
    <div class="layui-tab layui-tab-brief tabDiv">
        <ul class="layui-tab-title">
            <li class="layui-this">消息</li>
            <li>联系人</li>
            <li>动态</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item itemBigDiv layui-show "  >
                <div class="ItemDiv">
                    <img src="x1.jpg" />
                    <div class="nameLabel"><label>未闻花名</label><br /><label class="nameLabel">要成为海贼王的男人</label></div>
                </div>
                <div class="ItemDiv">
                    <img src="x1.jpg" />
                    <div class="nameLabel"><label>未闻花名</label><br /><label class="nameLabel">要成为海贼王的男人</label></div>
                </div>
                <div class="ItemDiv">
                    <img src="x1.jpg" />
                    <div class="nameLabel"><label>未闻花名</label><br /><label class="nameLabel">要成为海贼王的男人</label></div>
                </div>
                <div class="ItemDiv">
                    <img src="x1.jpg" />
                    <div class="nameLabel"><label>未闻花名</label><br /><label class="nameLabel">要成为海贼王的男人</label></div>
                </div>
                <div class="ItemDiv">
                    <img src="x1.jpg" />
                    <div class="nameLabel"><label>未闻花名</label><br /><label class="nameLabel">要成为海贼王的男人</label></div>
                </div>
                <div class="ItemDiv">
                    <img src="x1.jpg" />
                    <div class="nameLabel"><label>未闻花名</label><br /><label class="nameLabel">要成为海贼王的男人</label></div>
                </div>
                <div class="ItemDiv">
                    <img src="x1.jpg" />
                    <div class="nameLabel"><label>未闻花名</label><br /><label class="nameLabel">要成为海贼王的男人</label></div>
                </div>
                <div class="ItemDiv">
                    <img src="x1.jpg" />
                    <div class="nameLabel"><label>未闻花名</label><br /><label class="nameLabel">要成为海贼王的男人</label></div>
                </div>
                <div class="ItemDiv">
                    <img src="x1.jpg" />
                    <div class="nameLabel"><label>未闻花名</label><br /><label class="nameLabel">要成为海贼王的男人</label></div>
                </div>
                <div class="ItemDiv">
                    <img src="x1.jpg" />
                    <div class="nameLabel"><label>未闻花名</label><br /><label class="nameLabel">要成为海贼王的男人</label></div>
                </div>
                <div class="ItemDiv">
                    <img src="x1.jpg" />
                    <div class="nameLabel"><label>未闻花名</label><br /><label class="nameLabel">要成为海贼王的男人</label></div>
                </div>
                <div class="ItemDiv">
                    <img src="x1.jpg" />
                    <div class="nameLabel"><label>未闻花名</label><br /><label class="nameLabel">要成为海贼王的男人</label></div>
                </div>
                <div class="ItemDiv">
                    <img src="x1.jpg" />
                    <div class="nameLabel"><label>未闻花名</label><br /><label class="nameLabel">要成为海贼王的男人</label></div>
                </div>
                <div class="ItemDiv">
                    <img src="x1.jpg" />
                    <div class="nameLabel"><label>未闻花名</label><br /><label class="nameLabel">要成为海贼王的男人</label></div>
                </div>
            </div>
            <div class="layui-tab-item">2</div>
            <div class="layui-tab-item">3</div>
        </div>
    </div>

    <div class="SetDiv">
        <a href="#" class="layui-icon layui-icon-username" ></a>
        <a href="#" class="layui-icon layui-icon-refresh"></a>
        <a href="#" class="layui-icon layui-icon-set-sm"></a>
        <a href="#" class="layui-icon layui-icon-circle-dot"></a>
        <a href="#" class="layui-icon layui-icon-login-qq"></a>
    </div>
    <script>
        //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
        layui.use('element', function () {
            var element = layui.element;

            //…
        });
    </script>

</body>
</html>